<script src="jquery-3.5.1.min.js"></script>

<button onclick="hideslow()">hide slow</button>
<button onclick="showslow()">show slow</button>
<button onclick="toggleslow()">toggle slow</button><br>
<button onclick="slideup()">slide up</button>
<button onclick="slidedown()">slide down</button>
<button onclick="slidetoggle()">slide toggle</button><br>
<button onclick="fadein()">fade in</button>
<button onclick="fadeout()">fade out</button>
<button onclick="fadetoggle()">fade toggle</button>
<div id="test-show-hide" style="width: 512px; height: 512px; background-color: #ccc"></div>
<button onclick="animates()">animate</button>
<div id="test-animate" style="width: 128px; height: 128px; background-color: #ccc"></div>
<script>
    var div = $('#test-show-hide');
    function hideslow()
    {
        div.hide('slow');
    }
    function showslow()
    {
        div.show('slow');
    }
    function toggleslow()
    {
        div.toggle('slow');
    }
    function slideup()
    {
        div.slideUp('slow');
    }
    function slidedown()
    {
        div.slideDown('slow');
    }
    function slidetoggle()
    {
        div.slideToggle('slow');
    }
    function fadein()
    {
        div.fadeIn('slow');
    }
    function fadeout()
    {
        div.fadeOut('slow');
    }
    function fadetoggle()
    {
        div.fadeToggle('slow');
    }
    function animates()
    {
        var ani = $('#test-animate');
        // 动画效果：slideDown - 暂停 - 放大 - 暂停 - 缩小
        ani.hide().slideDown(2000)
        .delay(1000)
        .animate({
            width: '256px',
            height: '256px'
        }, 2000)
        .delay(1000)
        .animate({
            width: '128px',
            height: '128px'
        }, 2000);
    }

    

</script>
